import React from 'react';
import {NavBar, Icon, Carousel} from 'antd-mobile';

import {connect} from 'dva';
import styles from './IndexPage.css';


class Banner extends React.Component {
  state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
  }

  componentDidMount() {
    // simulate img loading
    setTimeout(() => {
      this.setState({
        data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
      });
    }, 100);

    this.props.dispatch({
      type:'orderwater/banner',
      payload:{
        type:'banner'
      }
    })
  }

  render() {
    return (
        <Carousel className="space-carousel"
                  frameOverflow="hidden"
                  cellSpacing={10}
                  slideWidth={0.8}
                  autoplay
                  infinite
                  beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                  afterChange={index => this.setState({slideIndex: index})}
        >
          {this.state.data.map((val, index) => (
            <a
              key={val}
              href="http://www.alipay.com"
              style={{
                display: 'block',
                position: 'relative',
                top: this.state.slideIndex === index ? -10 : 0,
                height: this.state.imgHeight,
                boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
              }}
            >
              <img
                src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                alt=""
                style={{width: '100%', verticalAlign: 'top'}}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({imgHeight: 'auto'});
                }}
              />
            </a>
          ))}
        </Carousel>
    );
  }
}


const IndexPage = ({dispatch, orderwater}) => {
  return (
    <div className={styles.normal}>
      <div style={{position: 'absolute', top: 0, width: '100%'}}>
        <NavBar
          mode="dark"
          onLeftClick={() => console.log('onLeftClick')}
          rightContent={[
            <Icon key="0" type="search" style={{marginRight: '16px'}}/>,
            <Icon key="1" type="ellipsis"/>,
          ]}
        >订水</NavBar>
        <Banner dispatch={dispatch}/>
      </div>

    </div>
  );
}

IndexPage.propTypes = {};

export default connect(({orderwater}) => ({
  orderwater,
}))(IndexPage);
